<script setup lang="ts" name="sideMenu">
/**可以删掉的，并没有被用到 */
import { useAppConfigUserStore, useAppConfigStore } from "@/stores";
import ExpandCollapseIcon from "../icons-button/expand-collapse.vue";
import { useRoute } from "vue-router";
import SubMenu from "./SubMenu.vue"
import useMenu from "@/hooks/useRouterList";
const route = useRoute();
const layoutConfig = useAppConfigUserStore().layoutConfig;
const activeMenu = computed(() => route.path);
const appConfig = useAppConfigStore();
const menuList = useMenu().showInMenuList

// 实现拖拽侧边栏宽度
// let detailWidth = ref<number>(200)
// const dragBarRef = ref<HTMLElement>()
// function  dragMenuWidth() {
//     dragBarRef.value!.onmousedown = function (e) {
//       // 颜色改变提醒
//       dragBarRef.value!.style.background = "#818181";
//       let startX = e.clientX;
//       document.onmousemove = function (e) {
//         // 计算并应用位移量
//         let endX = e.clientX;
//         let moveLen = endX - startX;
//         startX = endX;
//         detailWidth.value -= moveLen;
//       };
//       document.onmouseup = function () {
//         // 颜色恢复
//         dragBarRef.value!.style.background = "";
//         document.onmousemove = null;
//         document.onmouseup = null;
//       };
//       return false;
//   }
// }
// onMounted(
//   dragMenuWidth
// )
</script>

<template>
  <div
    class="side-menu"

  >
    <div class="side-menu__menu">
      <el-scrollbar>
        <el-menu
          :default-active="activeMenu"
          :router="false"
          :collapse="layoutConfig.collapseSideMenu"
          :collapse-transition="false"
          :unique-opened="true"
              :style="{
      width:
        !layoutConfig.collapseSideMenu || appConfig.isPhone ? '200px' : '4em',
    }"
        >
          <SubMenu :menuList="menuList"></SubMenu>
        </el-menu>
      </el-scrollbar>
      <!-- <div class="side-menu__menu__drag-bar" ref="dragBarRef"></div> 这个元素用于拖拽侧边栏-->
    </div>


    <div
      class="side-menu__button"
      :style="{ display: appConfig.isPhone ? 'none' : 'block' }"
    >
      <ExpandCollapseIcon></ExpandCollapseIcon>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.side-menu {
  position: relative;
  border-right: 0.1em solid var(--el-border-color);
  height: 100%;
  &__menu{
    display: flex;
    width:100%;
    height: 100%;
    .el-scrollbar{
      width:100%;
      height: 100%;

    }
    &__drag-bar{
      width:0.1em;
      background-color: var(--el-border-color);
    }
  }

  &__button {
    position: absolute;
    bottom: 1em;
    right: 1em;
  }

}
</style>
<style lang="scss">
	.el-menu,
	.el-menu--popup {
    width:100%;
    height: 100%;
    border: none;
		.el-menu-item {

			&.is-active {
				background: var(--el-color-primary-light-9);
				&::before {
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					width: 4px;
					content: "";
					background: var(--el-color-primary);
				}
			}
		}
	}
</style>
